<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: pink;
        }

        .page {
            margin: 30px auto;
            width: calc(320px*1.5);                                                                  
            height: calc(568px*1.5);
            background-color: aqua;
            position: relative;
            overflow: hidden;
        }

        .box {
            width: 100%;
            height: 100%;
            position: absolute;
            top: calc(-568px*1.5);
            z-index: 1;
        }

        .page .box .background {
            width: 100%;
            height: 100%;
            background-color: aqua;
            background: url(images/background_1.png) no-repeat;
            background-size: cover;
        }

        .page .smallEnemy {
            width: 32px;
            height: 24px;
            background: url(images/enemy1_fly_1.png) no-repeat;
            background-size: cover;
            position: absolute;
            top: -24px;
            z-index: 100;
        }

        .page .middleEnemy {
            width: 46px;
            height: 60px;
            background: url(images/enemy2_fly_1.png) no-repeat;
            background-size: cover;
            position: absolute;
            top: -60px;
            z-index: 50;
        }

        .page .bigEnemy {
            width: 110px;
            height: 164px;
            background: url(images/enemy3_fly_1.png) no-repeat;
            background-size: cover;
            position: absolute;
            top: -164px;
            left: 110px;
            z-index: 10;
        }

        .page .myPlane {
            width: 66px;
            height: 80px;
            background: url(images/我的飞机.gif) no-repeat;
            background-size: cover;
            position: absolute;
            bottom: 0px;
            left: 207px;
            z-index: 1000;
        }

        .page .bullet {
            width: 7px;
            height: 14px;
            background: url(images/bullet1.png) no-repeat;
            background-size: cover;
            position: absolute;
            bottom: 80px;
            left: 237px;
            z-index: 2000;
        }

        .page .end {
            position: absolute;
            display: none;
            width: 200px;
            height: 300px;
            top: 50%;
            left: 140px;
            z-index: 2000;
            text-align: center;
            font-size: 18px;
        }

        .page .end div {
            width: 80px;
            height: 30px;
            border: 2px solid black;
            border-radius: 5px;
            margin-left: 60px;
            margin-top: 10px;
        }

        .page .score {
            width: 300px;
            height: 25px;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 24px;
            font-weight: bold;
            z-index: 2000;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="box">
            <div class="background"></div>
            <div class="background"></div>
        </div>
        <div class="smallEnemy"></div>
        <div class="middleEnemy"></div>
        <div class="bigEnemy"></div>
        <div class="myPlane"></div>
        <div class="end">
            <h2>🐖你死啦哈哈哈哈哈哈哈哈哈哈</h2>
            <div>再来一次</div>
        </div>
        <div class="score">得分：<span>xxxxx</span></div>
    </div>
    <script>
        let page = document.querySelector(".page");
        let background = document.querySelector(".page .box");
        let Y = -568 * 1.5;
        let bgm = setInterval(function () {
            if (Y == 0) Y = -568 * 1.5;
            Y++;
            background.style.top = Y + "px";
        }, 50);

        class Planes {
            constructor(obj, speed, page, health) {
                this.obj = obj;
                this.speed = speed;
                this.top = -obj.offsetHeight;
                this.left = 0;
                this.class = obj.classList[0];
                this.page = page;
                this.health = health;
            }
            generate() {
                let newEnemy = document.createElement("div");
                newEnemy.classList = this.class;
                this.page.appendChild(newEnemy);
                let ooo = Math.ceil(Math.random() * (450 - this.obj.offsetWidth));
                newEnemy.style.left = ooo + "px";
                newEnemy.classList.add(this.health);
                this.move(newEnemy, this.top, this.speed);
            }
            move(newobj, t, s) {
                newobj.flying = setInterval(function () {
                    t += s;
                    newobj.style.top = t + "px";
                    if (t > 568 * 1.5 - newobj.offsetHeight) {
                        gameOver();
                    };
                }, 50);
            }
        }

        const smallEnemy = document.querySelector(".page .smallEnemy");
        const middleEnemy = document.querySelector(".page .middleEnemy");
        const bigEnemy = document.querySelector(".page .bigEnemy");
        const myPlane = page.querySelector(".myPlane");
        let sEnemy = new Planes(smallEnemy, 6, page, 2);
        let mEnemy = new Planes(middleEnemy, 3, page, 5);
        let bEnemy = new Planes(bigEnemy, 2, page, 20);
        let small = setInterval(() => {
            sEnemy.generate();
        }, 2000);
        let middle = setInterval(() => {
            mEnemy.generate();
        }, 4000);
        let big = setInterval(() => {
            bEnemy.generate();
        }, 10000);

        let leftPlane = 207;
        let topPlane = 758;
        myPlane.onmousedown = function (e) {
            let beginLeft = e.clientX;
            let beginTop = e.clientY;
            let planeLeft = this.offsetLeft;
            let planeTop = this.offsetTop;
            let that = this;
            document.onmousemove = function (e) {
                leftPlane = planeLeft + e.clientX - beginLeft;
                topPlane = planeTop + e.clientY - beginTop;
                if (leftPlane < 0) leftPlane = 0;
                if (leftPlane > 414) leftPlane = 414;;
                if (topPlane < 0) topPlane = 0;
                if (topPlane > 772) topPlane = 772;
                that.style.left = leftPlane + "px";
                that.style.top = topPlane + "px";
            };
        };
        myPlane.onmouseup = function lose() {
            document.onmousemove = null;
        };

        const bullet = page.querySelector(".bullet");
        let onfire = setInterval(function () {
            let newbullet = document.createElement("div");
            newbullet.classList = "bullet";
            page.appendChild(newbullet);
            newbullet.style.left = leftPlane + 30 + "px";
            newbullet.style.top = topPlane - 16 + "px";
            fire(newbullet, topPlane);
        }, 200);

        function fire(bulletObj, t) {
            let speed = 3;
            let goTop = t;
            bulletObj.injection = setInterval(function () {
                bulletObj.style.top = goTop + "px";
                if (goTop < -bulletObj.offsetHeight) {
                    clearInterval(bulletObj.injection);
                    page.removeChild(bulletObj);
                };
                goTop -= speed;
                let enemySmallAll = page.querySelectorAll(".smallEnemy");
                for (let a of enemySmallAll) {
                    if (crash(bulletObj, a)) {
                        console.log(a.classList[1]);
                        if (a.classList[1] == 1) {
                            a.style.background = "url(images/bz1.gif) no-repeat";
                            changeScore(10);
                            clearInterval(a.flying);
                            setTimeout(function () {
                                page.removeChild(a);
                                //a.style.display="none";
                            }, 400);
                        } else {
                            a.classList.replace(a.classList[1], a.classList[1] - 1);
                            clearInterval(bulletObj.injection);
                            page.removeChild(bulletObj)
                            //bulletObj.style.display="none";
                        };
                    };
                }
                let enemyMiddleAll = page.querySelectorAll(".middleEnemy");
                for (let b of enemyMiddleAll) {
                    if (crash(bulletObj, b)) {
                        if (b.classList[1] == 1) {
                            b.style.background = "url(images/bz2.gif) no-repeat";
                            changeScore(50);
                            clearInterval(b.flying);
                            setTimeout(function () {
                                page.removeChild(b);
                                //b.style.display="none";
                            }, 400);
                        } else {
                            b.classList.replace(b.classList[1], b.classList[1] - 1);
                            clearInterval(bulletObj.injection);
                            page.removeChild(bulletObj)
                            //bulletObj.style.display="none";
                        };
                    };
                }
                let enemyBigAll = page.querySelectorAll(".bigEnemy");
                for (let c of enemyBigAll) {
                    if (crash(bulletObj, c)) {
                        if (c.classList[1] == 1) {
                            c.style.background = "url(images/bz3.gif) no-repeat";
                            changeScore(100);
                            clearInterval(c.flying);
                            setTimeout(function () {
                                page.removeChild(c);
                                //c.style.display="none";
                            }, 600);
                        } else {
                            c.classList.replace(c.classList[1], c.classList[1] - 1);
                            clearInterval(bulletObj.injection);
                            page.removeChild(bulletObj)
                            //bulletObj.style.display="none";
                        };
                    };
                }
            }, 10);
        };

        function crash(obj1, obj2) {
            let l1 = obj1.offsetLeft;
            let r1 = obj1.offsetLeft + obj1.offsetWidth;
            let t1 = obj1.offsetTop;
            let b1 = obj1.offsetTop + obj1.offsetHeight;
            let l2 = obj2.offsetLeft;
            let r2 = obj2.offsetLeft + obj2.offsetWidth;
            let t2 = obj2.offsetTop;
            let b2 = obj2.offsetTop + obj2.offsetHeight;
            if (r1 < l2 || b1 < t2 || l1 > r2 || t1 > b2) {
                return false;
            }
            return true;
        };

        let died = setInterval(function () {
            let nowMe = page.querySelector(".myPlane");
            let enemySmallAll = page.querySelectorAll(".smallEnemy");
            for (let value1 of enemySmallAll) {
                if (crash(nowMe, value1)) {
                    gameOver();
                };
            }
            let enemyMiddleAll = page.querySelectorAll(".middleEnemy");
            for (let value2 of enemyMiddleAll) {
                if (crash(nowMe, value2)) {
                    gameOver();
                };
            }
            let enemyBigAll = page.querySelectorAll(".bigEnemy");
            for (let value3 of enemyBigAll) {
                if (crash(nowMe, value3)) {
                    gameOver();
                };
            }
        }, 50)

        function clearAll() {
            clearInterval(small);
            clearInterval(middle);
            clearInterval(big);
            clearInterval(bgm);
            clearInterval(onfire);
            let enemySmallAll = page.querySelectorAll(".smallEnemy");
            for (let a of enemySmallAll) {
                clearInterval(a.flying);
            }
            let enemyMiddleAll = page.querySelectorAll(".middleEnemy");
            for (let b of enemyMiddleAll) {
                clearInterval(b.flying);
            }
            let enemyBigAll = page.querySelectorAll(".bigEnemy");
            for (let c of enemyBigAll) {
                clearInterval(c.flying);
            }
            let myBullets = page.querySelectorAll(".bullet");
            for (let d of myBullets) {
                clearInterval(d.injection);
            }
        }


        const againBtn = page.querySelector(".end div");
        const endWindow = page.querySelector(".end");
        againBtn.onclick = function () {
            console.log("重来");
            window.location.reload();
        };

        function gameOver() {
            clearAll();
            document.onmousemove = null;
            endWindow.style.display = "block";
        }

        let nowScore = 0;
        function changeScore(add) {
            let score = page.querySelector(".score span");
            nowScore += add;
            score.innerText = nowScore;
        };
        window.onload = changeScore(nowScore);

        
    </script>
</body>

</html>